<!DOCTYPE html>
<html>
	<head>
		<!-- Latest compiled and minified CSS -->
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>		
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
		<link rel="stylesheet" href="/static/style.css">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Scans</title>
	</head>
	<body>
		<div class="container">

			<nav class="navbar navbar-default" role="navigation">
				<p class="navbar-brand" href="#">Scans</p>
				<div class="navbar-collapse collapse">
					<ul class="nav navbar-nav navbar-left">
						<li><a href="/scan">{{if .Ready}}新扫描{{else}}正在扫描{{end}}</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="/refresh">刷新显示已扫描项目</a></li>
					</ul>
				</div>
			</nav>

			{{range .Items}}
			<div class="scanitem">
				<p>#{{.Id}} ({{.Date}})</p>
				<a href="http://192.168.150.1:81/pdf.js/web/viewer.html?file=http://192.168.150.1:81/data/scans/{{.Filepath}}"><img src="http://192.168.150.1:81/data/scans/{{.Thumbnail}}" width="100px" /></a><br>
				<a href="http://192.168.150.1:81/pdf.js/web/viewer.html?file=http://192.168.150.1:81/data/scans/{{.Filepath}}" class="button">查看</a>
				<a href="http://192.168.150.1:81/data/scans/{{.Filepath}}" class="button">下载</a>
				<button type="button" class="btn btn-default btn-sm" onclick="askForDelete('{{.Filepath}}')">
					<span class="glyphicon glyphicon-remove"></span>
				</button>
			</div>
			{{end}}
		</div>
		<div class="modal "></div>
		<script>
			function askForDelete(target) {
				if (confirm("是否删除该项目 ?")) {
					$.get("/remove?target="+target, function(data) {
						location.reload(true);
					});
				}
			}
		{{if not .Ready}}
			$.get("/scan/wait", function(data) {
				location.reload(true);
			});
		{{end}}
		</script>
	</body>
</html>
